<html>
    <head>
        <title>vue入门</title>
        <!-- 普通html里安装vue方式 -->
        <!-- 【安装方式1】下载到本地的vue脚本文件 -->
        <script src="./vue.js"></script>

        <!-- 【安装方式2】远程cdn的vue脚本文件 -->
        <!-- <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script> -->
    </head>
    <body>
        <!-- 挂载点是 id=root的div -->
        <div id="root">

            
            <!-- 【插值】{{数据里的属性名}} 这种语法叫插值，就是把数据data里面的某个属性名，比如msg的值插到这里 -->
            <h1>{{msg}}</h1>

            <!-- v-text 和 v-html的区别 -->
            <div v-text = "content">v-text</div>

            <div v-html = "content">v-html</div>



            <!-- 【绑定事件：v-on:click或简写@click】 绑定元素的点击事件 v-on:click  或者简写  @click-->
            <!-- <div v-on:click="handleClick">{{msg}}</div> -->
            <div @click="handleClick">{{msg}}</div>


            <!-- 【属性绑定 v-bind:  缩写:】-->
            <!-- <div v-bind:title="title">演示属性绑定语法：v-bind</div> -->
            <div :title="titleValue">演示属性绑定语法的缩写方法：一个英文冒号:代替v-bind:</div>
       
       
       
            <!-- 【单向绑定】 -->
            <!-- <input :value="content">
            <div>{{content}}</div> -->
            <!-- 【双向数据绑定：v-model】 -->
            <input v-model="content">
            <div>{{content}}</div>


            <!-- 【v-if  v-show v-for指令】 -->
            <div v-if="show">演示v-if指令</div>
            <button @click="handleShow">显示/隐藏</button>

            <div v-show="show2">演示v-show指令</div>
            <button @click="handleShow2">显示/隐藏2</button>

            <ul>
                <li v-for="(item,index) of list" :abc="index" :key="index">{{item}}</li>
            </ul>

        </div>



        <div style="margin-bottom: 50px;"></div>

        <div>{{msg}} 我不在挂载点root里面，所以我不属于vue相关内容，我是普通的html元素，无法读取vue定义的数据msg属性值</div>

        <script>
            vm = new Vue({
                //【el】指定Vue接管的页面元素，id=root的dom元素
                el: "#root",
                // template:"<h1>【vue的template里面】我是模板内容，在挂载点里面。这是vue数据属性msg的值：{{msg}}</h1>",
                //【data】是数据项集合
                data: {
                    msg: "hello world!",
                    number: 123,
                    content: "<h2>我是content的内容</h2>",
                    titleValue: "这是来自vue的titleValue变量的值",
                    show: true,
                    show2: true,
                    list:["安卓","苹果","小程序","h5网页"]
                },
                //【methods】：脚本方法
                methods: {
                    handleClick(){
                        this.msg = "你好"
                    },
                    handleShow(){
                        this.show = !this.show;
                    },
                    handleShow2(){
                        this.show2 = !this.show2;
                    }
                }
            })

            vm.msg = "你好"
        </script>
    </body>
</html>